<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.chartData);
    },
    setOptions({ xAxis, series, legend, color, yAxis, title, grid, tooltip }) {
      if (Array.isArray(yAxis)) {
        yAxis = yAxis;
      } else {
        yAxis = {
          ...{
            axisTick: {
              show: false,
            },
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: "#333399",
              },
            },
            splitLine: {
              show: false,
            },
          },
          ...yAxis,
        };
      }
      xAxis = {
        ...{
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#333399",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#000000",
            //是否显示最大 tick 的 label
            showMaxLabel: true,
            //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠
            rotate:
              document.body.clientWidth < 1600 && xAxis.length > 10 ? 30 : 0,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 5; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1 && xAxis.length > 10) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        ...xAxis,
      };

      this.chart.setOption(
        {
          title: title ? title : {},
          xAxis: xAxis,
          color: color ? color : [],
          grid: {
            ...{
              top: "20%",
              left: "2%",
              right: "3%",
              bottom: "5%",
              containLabel: true,
            },
            ...grid,
          },
          tooltip: {
            trigger: "axis",
            // trigger: "item",
            // formatter: "{a} <br/>{b} : {c}",
            backgroundColor: "rgba(0,0,0,0.7)",
            borderColor: "transparent",
            textStyle: {
              color: "#C8FBFB",
            },
            ...tooltip,
          },
          yAxis: yAxis,
          legend: legend,
          series: series,
        },
        true
      );
    },
  },
};
</script>
